<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>复选按钮 Checkboxes--JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script src="../../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script src="../../style/jqmapi.js" tppabs="http://www.jqmapi.com/style/jqmapi.js"></script>
<script type="text/javascript">
$(function(){
	    $("ul.tab a").click(function() {
        var i = $("ul.tab a").index(this);
        $(this).parent().find("a").removeClass("current");
        $(this).addClass("current");
        $(".subtab").hide().eq(i).show();
        return false;
		});
	});
</script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<hr style="color:#595959;" />

<div class="content">
			<h1>复选按钮 Checkboxes</h1>
				<ul class="tab">
                    <a href="#" class="current">综述</a>
                    <a href="#">选项</a>
                    <a href="#">方法</a>
                    <a href="#">事件</a>
                </ul><br>
                
    <div class="subtab">
				<div class="desc">
                <div>复选框用来提供一组选项，可以选中不止一个选项。传统的桌面程序的单选按钮组没有对触摸输入的方式进行优化，所以在Jquery Mobile中，<strong>label也被样式化为复选按钮</strong>，使按钮更长，容易点击。并添加了自定义的一组图标来增强视觉反馈。</div> 
                <div>单选按钮组和复选按钮组都是用标准的html代码写的(input/label标记)，但是都被样式化得更容易点击。你所看见的控件其实是覆盖在input上的label元素， 所以如果图片没有正确加载，你仍然可以正常使用控件。在大多数浏览器里，点击label会自动触发在input上的点击，但是我们不得不为部分不支持该特性的移动浏览器人工去触发该点击。在桌面程序里，键盘和屏幕阅读器也可以使用这些控件。</div> 

                <div>要创建一组复选框，为input添加<strong> type="checkbox"</strong>属性和相应的<strong>label</strong>即可。注意要把label的for属性设为input的id值，使他们能够在语义上相关联。</div> 
                 <div>因为复选按钮使用label元素放置checkbox后，用来显示其文本，我们推荐把复选按钮组用fieldset容器包裹，并给fieldset容器内增加一个legend 元素，用来表示该问题的标题。</div>                
                 <div>最后，还需将fieldset包裹在有data-role="controlgroup"属性的div 里以便于将该组元素和文本框，选择框等其他表单元素同时设置样式。</div>   
  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <p>&lt;div data-role=&quot;fieldcontain&quot;&gt;<br>
&lt;fieldset data-role=&quot;controlgroup&quot;&gt;<br>
&lt;legend&gt;Agree to the terms:&lt;/legend&gt;<br>
&lt;input type=&quot;checkbox&quot; name=&quot;checkbox-1&quot; id=&quot;checkbox-1&quot; class=&quot;custom&quot; /&gt;<br>
&lt;label for=&quot;checkbox-1&quot;&gt;I agree&lt;/label&gt;<br>
&lt;/fieldset&gt;<br>
&lt;/div&gt;</p>
</div>

	<div>上面的代码会生成两个基本的复选按钮。默认样式下，宽度为父容器的100%</div>  
     <img src="../../images/form element/checkbox2.jpg" tppabs="http://www.jqmapi.com/images/form element/checkbox2.jpg"> 

</div>


	<h1>迷你版本 Mini version</h1>
    				<div class="desc">
                <div>给表单元素添加 <strong>data-mini="true"</strong>属性，可以使表单元素在外观上更加紧凑。</div> 
                </div>
  <p class="indent"><strong>HTML 代码:</strong></p>
  				<div class="code">
				  <pre>&lt;input type="checkbox" name="checkbox-0" id="checkbox-mini-0" class="custom" <strong>data-mini="true"</strong> /&gt; 
&lt;label for="checkbox-mini-0"&gt;I agree&lt;/label&gt;
</pre>
	</div>
    				<div class="desc">
                <div>这样创建的复选按钮比标准的复选按钮矮一些，字号也小一些。</div> 
                </div>
			 <img src="../../images/form element/checkbox3.jpg" tppabs="http://www.jqmapi.com/images/form element/checkbox3.jpg"> 
			<h1>垂直成组的复选按钮组  Vertically grouped checkboxes</h1>
				<div class="desc">
                <div>通常情况下，复选按钮组会置于标题下面。 Jquery Mobile会自动移除按钮间的margin，给按钮组上下添加圆角，使得单选按钮组看起来为一个整体。</div>
                <img src="../../images/form element/checbox.png" tppabs="http://www.jqmapi.com/images/form%20element/checbox.png"> 
</div>        

	       	<h1>水平的复选按钮组 Horizontal toggle sets</h1>		
 				<div class="desc">
                <div>复选按钮组也可用作复选的水平按钮组，,可以同时选择多个按钮。比如说文字编辑器的粗体,斜体, 下划线。只需要为fieldset添加 data-type="horizontal"属性即可。</div>

</div>  
				<div class="code">
				  <p>&lt;fieldset data-role=&quot;controlgroup&quot; data-type=&quot;horizontal&quot; data-role=&quot;fieldcontain&quot;&gt;</p>
</div>
  				<div class="desc">
                <div>Jquery Mobile会自动将标签浮动，并排放置，并隐藏复选按钮的icon,并给左右两边的按钮增加圆角。</div>
                <img src="../../images/form element/checbox2-1.png" tppabs="http://www.jqmapi.com/images/form element/checbox2.png">  
</div> 
</div> 

<div class="subtab" style="display:none">
	  <div class="desc">
        <div>复选按钮拥有如下选项：</div>
</div>
	  <h1 class="method"><div class="wg">mini</div>
  		<div class="info">布尔值</div>
</h1>
				<div class="desc">
				<div><strong>默认：false</strong></div>
                </div>
				<div class="desc">
				<div>让部件的外观更紧凑。也可以通过<strong>data-mini="true"</strong>的属性来设置。</div>
                </div>
	  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$("input[type='checkbox']").checkboxradio(<strong>{ </strong>mini: "true"<strong> }</strong>);</pre>
                </div>
	<h1 class="method"><div class="wg">theme</div>
  		<div class="info">字符串</div>
</h1>
				<div class="desc">
				<div><strong>默认null, 继承父容器</strong></div>
                </div>
				<div class="desc">
				<div>给这个组件的所有实例设定颜色主题。接受从a-z的一个字母来映射你的主题。默认情况下，它继承父容器的相同主题。这个选项也可以通过data-theme="a"的属性来配置</div>
                </div>
	  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$('.selector').textinput({ theme: &quot;a&quot; });
</pre>
</div>
    </div>




<div class="subtab" style="display:none">
	  <div class="desc">
                <div>复选按钮拥有如下方法：</div>
	<h1 class="method"><div class="wg">enable</div>
  		<div class="info">使一个复选按钮可用</div>
	</h1>
</div>
	  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre> $("input[type='checkbox']").checkboxradio('enable');</pre>
                </div>
	<h1 class="method"><div class="wg">disable</div>
  		<div class="info">使一个输入框不可用</div>
</h1>
	  <p class="indent"><strong>HTML 代码:</strong></p>
	  <div class="code">
				  <pre>$("input[type='checkbox']").checkboxradio('disable');</pre>
      </div>
	<h1 class="method">
	  <div class="wg"> refresh </div>
  		<div class="info">更新复选按钮</div>
	</h1>
				<div class="desc">
				<div>如果通过js修改了复选按钮，必须通过refresh 来更新复选按钮的外观。</div>
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$("input[type='checkbox']:first").attr("checked",true).checkboxradio("refresh");</pre>
                </div>
                </div>
</div>


 <div class="subtab" style="display:none">
	  <div class="desc">
                <div>可以给input元素直接绑定事件，可以使用jQuery Mobile的虚拟事件，或者绑定JavaScript的标准事件，例如change, focus, blur等。</div>
</div>
	  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">
				  <pre>$("input[type='checkbox']").bind( "change", function(event, ui) {    ...  });</pre>
                </div>
	<h1 class="method"><div class="wg">create</div>
  		<div class="info">当input 被创建时触发</div>
</h1>
	  <p class="indent"><strong>HTML 代码:</strong></p>
	  <div class="code">
				  <pre>$("input[type='checkbox']").checkboxradio({    
 <strong>create: function(event, ui) { ... }  </strong>
});	</pre>
      </div>
</div> 




</div>

</div>
</div>

</body>
</html>



